<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
import { fetchApi } from '../apis/fetchapi'
import GoBack from '../components/GoBack.vue'
import { ref } from 'vue'
const isAgree = ref(false);
const telphone = ref('');
const code = ref('');
const alertShow = ref(0);
import { userStore } from '../store'
const userSData = userStore();
function submitInfo() {
  if (telphone.value === '') {
    proxy.$toast({
      value: '请输入手机号/账号',
      type: 'fail'
    })
    return false;
  }

  if (!(code.value)) {
    proxy.$toast({
      value: ' 请输入密码',
      type: 'fail'
    })
    return false;
  }
  if (!(isAgree.value)) {
    proxy.$toast({
      value: '请阅读并同意供应商管理系统《用户协议》',
      type: 'fail'
    })
    return false;
  }

  fetchApi('/login', { phone: telphone.value, password: code.value }).then(res => {
    if (res.code === 200) {
      proxy.$toast({
        value: '登录成功'
      })
      userSData.$patch((s) => {
        s.loginauth = res.data.Authorization;
        s.username = telphone.value;
      })
      setTimeout(() => {
        window.location.href = '/';
      }, 1000)

    } else {
      proxy.$toast({
        value: res.msg,
        type: 'fail'
      })
    }
  })

}
function alertWindow(i) {
  alertShow.value = i;
}

function agreeCb() {
  isAgree.value = true
  alertShow.value = 0;
}
const isRemember = ref(false);
</script>

<template>
  <div class="login-container">
    <GoBack title="登录"></GoBack>
    <div class="login-con">
      <div class="logo"></div>
      <div class="title">
        <b>在线活动管理系统</b>
        V1.0.0
      </div>
      <div class="input">
        <div class="input-li">
          <input v-model="telphone" placeholder="请输入手机号/账号" />
        </div>
        <div class="input-li">
          <input v-model="code" placeholder="请输入密码" type="passward" />
        </div>
      </div>
      <div class="rf">
        <div class="remember" :class="{ active: isRemember }" @click="isRemember = !isRemember"><span></span> 记住密码</div>
        <div class="forget" @click="alertShow = 1">忘记密码?</div>
      </div>

      <div class="login-btn" @click="submitInfo">登录</div>
      <div class="login-warning">
        <div class="to-agree" :class="{ agree: isAgree }" @click="isAgree = !isAgree"></div>
        <div class="text">
          我已阅读并同意供应商管理系统 <a @click="alertWindow(2)">用户协议</a>
        </div>
      </div>
    </div>
    <div class="alert-window" v-if="alertShow > 0">
      <div class="win-password" v-if="alertShow === 1">
        <div class="title">
          <b>修改密码</b>
          <div class="close" @click="alertShow = 0"></div>
        </div>
        <div class="btitle">忘记密码及修改密码</div>
        <div class="ntitle">请联系管理员或致电客服</div>
        <div class="confirm" @click="alertShow = 0">好的</div>
      </div>
      <div class="win-agreement" v-if="alertShow === 2">
        <div class="agree-con">
          <div class="title">用户协议</div>
          <div class="agree-content">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias iusto, ab recusandae, incidunt mollitia
              quas eligendi voluptatibus totam aliquid ipsam quaerat ipsa soluta repellendus, cumque autem a dignissimos
              unde. Et!</p>
          </div>
          <div class="btns">
            <div class="close" @click="alertShow = 0">返回</div>
            <div class="agree" @click="agreeCb()">同意</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  width: 100%;
  overflow: auto;
  height: 100vh;
}

.login-con {
  box-shadow: rgb(217, 217, 217) 0px 0px 16px 1px;
  border-radius: 8px;
  width: 365px;
  height: calc(100vh - 54px - 6px);
  margin: 10px auto 0;
  box-sizing: border-box;
  padding: 30px 0 0;
  background: #ffffff;

  .logo {
    width: 56px;
    height: 56px;
    background: url(../assets/images/g25.png) no-repeat center;
    background-size: 100%;
    display: block;
    margin: 0 auto 15px;
  }

  .title {
    width: 100%;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: rgb(94, 94, 94);
    margin: 0 auto 10px;

    b {
      display: block;
      color: rgb(54, 145, 255);
      font-size: 28px;
      font-weight: normal;
    }
  }

  .input {
    width: 320px;
    margin: 0 auto;
  }

  .input-li {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    input {
      display: block;
      width: 100%;
      height: 32px;
      line-height: 32px;
      color: #666666;
      font-size: 16px;
      text-align: left;
      box-sizing: border-box;
      padding: 0;
    }

    .get-code {
      display: block;
      text-align: left;
      margin-left: 20px;
      color: #032d83;
      font-size: 41px;
      cursor: pointer;

    }
  }

  .rf {
    width: 320px;
    margin: 0 auto 25px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .remember {
      color: rgb(140, 140, 140);
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      &.active span::before {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        background: rgb(0, 118, 255);
        border-radius: 50%;
      }

      span {
        margin-right: 5px;
        width: 16px;
        height: 16px;
        border: 1PX solid rgb(199, 199, 205);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .forget {
      text-align: right;
      font-size: 12px;
      color: rgb(54, 145, 255);
    }
  }

  .login-btn {
    width: 312px;
    height: 40px;
    background-color: rgb(54, 145, 255);
    border-radius: 4px;
    margin: 0 auto 10px;
    font-size: 16px;
    letter-spacing: 1px;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
  }

  .login-warning {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;

    .to-agree {
      margin-right: 5px;
      width: 16px;
      height: 16px;
      border: 1PX solid rgb(199, 199, 205);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      &.agree::before {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        background: rgb(0, 118, 255);
        border-radius: 50%;
      }
    }

    .text {
      font-size: 12px;
      color: rgb(140, 140, 140);

      a {
        color: rgb(0, 118, 255);
        text-decoration: underline;
      }
    }
  }
}

.alert-window {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.6);

}

.win- {
  &password {
    width: 340px;
    height: 200px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgb(255, 255, 255);
    border-radius: 6px;

    .title {
      display: flex;
      height: 60px;
      width: 90%;
      margin: 0 auto 3px;
      color: rgb(38, 50, 56);
      align-items: center;
      justify-content: space-between;

      b {
        font-size: 16px;
        font-weight: bold;
      }

      .close {
        width: 28px;
        height: 28px;
        background: url(../assets/images/g26.png) no-repeat center;
        background-size: 100%;

      }
    }

    .btitle {
      font-size: 18px;
      font-weight: bold;
      width: 100%;
      text-align: center;
      color: rgb(54, 145, 255);
      margin-bottom: 2px;

    }

    .ntitle {
      font-size: 14px;
      color: rgb(38, 50, 56);
      height: 28px;
      line-height: 28px;
      text-align: center;
      margin-bottom: 25px;
    }

    .confirm {
      width: 112px;
      height: 36px;
      text-align: center;
      color: rgb(255, 255, 255);
      align-items: center;
      text-align: center;
      justify-content: center;
      background: rgb(54, 145, 255);
      text-align: center;
      line-height: 36px;
      border-radius: 4px;
      margin: 0 auto;
    }
  }

  &agreement {
    width: 340px;
    height: 520px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgb(255, 255, 255);
    border-radius: 6px;

    .title {
      height: 50px;
      line-height: 60px;
      width: 90%;
      margin: 0 auto 3px;
      color: rgb(38, 50, 56);
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: black;
      text-align: center;
    }

    .agree-content {
      width: 98%;
      margin: 0 auto 20px;
      height: 390px;
      overflow: auto;
      box-sizing: border-box;
      padding: 0 12px;
    }

    .btns {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        width: 112px;
        height: 36px;
        text-align: center;
        color: rgb(255, 255, 255);
        align-items: center;
        text-align: center;
        justify-content: center;
        background: rgb(54, 145, 255);
        text-align: center;
        line-height: 34px;
        border-radius: 4px;
        margin: 0 16px;
        box-sizing: border-box;
        border: 1PX solid rgb(54, 145, 255);

        &.close {
          border-color: rgb(140, 140, 140);
          color: rgb(140, 140, 140);
          background: none;
        }
      }
    }
  }
}
</style>
